<template>
  <div>
    <!-- 导航栏 -->
    <header id="site-header" class="w3l-header fixed-top">
      <!--/nav-->
      <div
        style="border-bottom: 3px solid #000; box-shadow: 8px 4px 4px #888888"
      >
        <nav
          class="navbar navbar-expand-lg navbar-light fill px-lg-0 py-0 px-3"
        >
          <div class="container" style="min-width: 1200px">
            <h1>
              <a class="navbar-brand" type="primary" @click="toPage(0)">
                <img
                  src="../images/logo1.png"
                  alt="logo"
                  title="logo"
                  style="height: 60px"
                />
              </a>
            </h1>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav ml-auto">
                <!-- class="active"可以使文字变蓝 -->

                <li class="nav-item">
                  <a class="nav-link" type="primary" @click="toPage(0)">首页</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" type="primary" @click="toPage(3)"
                    >用户反馈</a
                  >
                </li>
                <li class="nav-item">
                  <a class="nav-link" type="primary" @click="toPage(7)"
                    >电影院</a
                  >
                </li>
                <li class="nav-item">
                  <a
                    href="http://localhost:8501/"
                    class="nav-link"
                    target="_blank"
                    type="primary"
                    >AI入口</a
                  >
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link"
                    type="primary"
                    @click="toPage(8)"
                    v-show="!isLogin"
                    >登录</a
                  >
                </li>
                <li class="nav-item">
                  <a
                    class="nav-link"
                    type="primary"
                    @click="toPage(9)"
                    v-show="!isLogin"
                    >注册</a
                  >
                </li>
                <li class="nav-item">
                  <!-- 设置上传头像 -->
                  <div v-show="isLogin">
                    <div class="curr-manager">
                      <a-avatar
                        v-if="currImageUrl"
                        @click="setAvatar"
                        :src="currImageUrl"
                      />
                      <!-- <span
                      v-else
                      @click="setAvatar"
                      style="
                        font-size: 18px;
                        color: #6495ED;
                        "
                    >设置头像</span> -->
                      <a-dropdown placement="bottomCenter">
                        <a
                          style="
                            color: #000;
                            margin-left: 20px;
                            font-size: 18px;
                          "
                          @click.prevent
                        >
                          {{ user.cust_username }}
                          <DownOutlined />
                        </a>
                        <template #overlay>
                          <a-menu>
                            <a-menu-item>
                              <a class="menu-item" @click="toCustInfo()"
                                >个人信息</a
                              >
                            </a-menu-item>
                            <a-menu-item>
                              <a class="menu-item" @click="toOrder()"
                                >我的订单</a
                              >
                            </a-menu-item>
                            <a-menu-item>
                              <a class="menu-item" @click="exit()">退出登录</a>
                            </a-menu-item>
                          </a-menu>
                        </template>
                      </a-dropdown>

                      <!-- 设置头像弹框 -->
                      <a-modal
                        v-model:visible="visible"
                        title="设置头像"
                        @ok="execUpload"
                      >
                        <a-upload
                          list-type="picture-card"
                          class="avatar-uploader"
                          :show-upload-list="false"
                          :before-upload="() => false"
                          @change="handleChange"
                        >
                          <img v-if="imageUrl" :src="imageUrl" />
                          <div v-else>
                            <plus-outlined />
                            <!-- <div class="ant-upload-text">选择头像</div> -->
                          </div>
                        </a-upload>
                      </a-modal>
                    </div>
                  </div>
                </li>
                <li class="nav-item">
                  <div>
                    &nbsp; &nbsp;
                    <a-input-search
                      v-model:value="keyword"
                      placeholder="搜索电影"
                      enter-button
                      @search="toSearch"
                      style="width: 250px"
                    />
                  </div>
                </li>
              </ul>
            </div>
            <!-- 模式转换 -->
          </div>
        </nav>
      </div>
      <!-- 导航栏 -->
    </header>
    <!-- 导航栏 -->
    <div>
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  get,
  del,
  post,
  getBlob,
  tip,
  removeLocalToken,
  getLocalToken,
} from "@/common";
import {
  DownOutlined,
  UserOutlined,
  PlusOutlined,
} from "@ant-design/icons-vue";

const router = useRouter();
const isLogin = ref(false);

const pathes = [
  "/home/index",
  "/home/cust_cinema",
  "/home/cust_info",
  "/home/cust_feedback",
  "/home/cust_movie",
  "/home/cust_order",
  "/home/cust_ticket",
  "/home/cinema",
  "/login",
  "/register",
  "/m_home",
  "",
];

router.push({ path: "/home/index" });

const toPage = (temp_index) => {
  router.push({ path: pathes[temp_index] });
};

const user = ref([]);
const username = ref("");
const keyword = ref("");
const orderpath = ref("");

const toSearch = () => {
  router.push({ path: "/home/cust_movie", query: { keyword: keyword.value } });
};

const getCurrnetUser = () => {
  get("/user/info").then((res) => {
    user.value = res.data;
    username.value = user.value.cust_username;
    isLogin.value = true;
    getAvatar();
  });
};

const token = getLocalToken();
console.log("!!!!!!");
console.log(token);

getCurrnetUser();

const exit = () => {
  del("/security/home/exit").then((res) => {
    user.value = null;
    username.value = false;
    isLogin.value = false;
    removeLocalToken();
    router.push({ path: "/home/index" });
  });
};

const toCustInfo = () => {
  router.push({ path: "/home/cust_info" });
};

const toOrder = () => {
  router.push({ path: "/home/cust_order" });
};

const currImageUrl = ref("");
const getAvatar = () => {
  if (!user.value || !user.value.avatar_address) {
    return;
  }
  getBlob(
    "/security/home/avatar/" + user.value.avatar_address,
    {},
    { loading: false }
  ).then((blob) => {
    const reader = new FileReader();
    reader.addEventListener("load", () => {
      currImageUrl.value = reader.result;
    });
    reader.readAsDataURL(blob);
  });
};

//头像上传
const avatarFile = ref(null);
const imageUrl = ref("");
const visible = ref(false);

const setAvatar = () => {
  visible.value = true;
};

//选择头像
const handleChange = (info) => {
  avatarFile.value = info.file;
  const reader = new FileReader();
  reader.addEventListener("load", () => {
    imageUrl.value = reader.result;
  });
  reader.readAsDataURL(info.file);
};

//执行上传
const execUpload = () => {
  if (!avatarFile.value) {
    tip.error("请选择头像！");
    return;
  }
  const formData = new FormData();
  formData.append("avatar", avatarFile.value);
  post("/security/home/avatar", formData).then((res) => {
    tip.success("头像设置成功！");
    visible.value = false;
    getCurrnetUser();
  });
};
</script>

<style>
@import "../css/cinema.css";
@import "../css/style-starter.css";
@import "../css/base.css";
@import "../css/bootstrap-grid.css";

.con {
  border-bottom: 5px solid #000;
}

/* 上传头像样式 */
.avatar-uploader {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.avatar-uploader > .ant-upload {
  width: 300px;
  height: 300px;
}
.avatar-uploader img {
  max-width: 300px;
  max-height: 300px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

.menu-item {
  font-size: 16px;
}
</style>